<template>
  <div class="container" id="box">
    <header class="center">{{ym}}评价报告汇总管理</header>
    <main>
      <div class="center mt15">
        <a @click="init()">全部</a>
        <a @click="findList(1,'i')">安全评价</a>
        <a @click="findList(2,'i')">职卫评价</a>
        <a @click="findList(3,'i')">其他报告</a>
          <el-select
          style="margin-left:10px"
          v-model="selectComId"
          @change="changeCom($event)"
          filterable
           v-if="level==4"
          placeholder="请选择分公司查询"
        >
          <el-option
            v-for="(item , index) in coms"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-select
          v-model="selectPersonId"
          @change="changePerson($event)"
          filterable
          placeholder="请选择人员查询"
        >
          <el-option
            v-for="(item , index) in persons"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="flex mt15">
        <section class="left">
          <el-button @click="print" type="primary" size="mini" style="margin:30px auto;">打印</el-button>
          <!-- <el-button type="primary" size="mini" style="margin:30px auto;">导入</el-button>
          <el-button type="primary" size="mini" style="margin:30px auto;">历史数据</el-button>
        -->
        </section>
        <section class="right">{{ymd}}</section>
      </div>
    </main>
    <el-table
      ref="print"
      id="table"
      v-loading="loading"
      :data="tableData"
      align="center"
      border
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" align="center" :width="w.a1" prop="id"></el-table-column>
      <el-table-column align="center" label="合同编号" :width="w.a2" prop="con_number"></el-table-column>
      <el-table-column align="center" label="客户名称" :width="w.a3" prop="name"></el-table-column>
      <el-table-column align="center" label="项目名称" :width="w.a4" prop="pro_name"></el-table-column>
      <el-table-column align="center" label="项目负责人" :width="w.a5" prop="proPrincipalName"></el-table-column>
      <el-table-column align="center" label="项目部门" :width="w.a6" prop="pro_department"></el-table-column>
      <el-table-column align="center" label="初稿递交日期" :width="w.a7" prop="create_time"></el-table-column>
      <!-- <el-table-column v-if="hide" align="center" label="一审人员" :width="w.a8" prop="oneauthor"></el-table-column> -->
      <el-table-column align="center" label="一审修改意见日期详情" :width="w.a9" prop="amend_time1"></el-table-column>
      <!-- <el-table-column v-if="hide" align="center" label="一审修改版报告日期" :width="w.a10" prop="report_time1"></el-table-column> -->
      <!-- <el-table-column v-if="hide" align="center" label="二审人员" :width="w.a11" prop="twoauthor"></el-table-column> -->
      <el-table-column align="center" label="二审修改意见日期详情" :width="w.a12" prop="report_time1"></el-table-column>
      <!-- <el-table-column v-if="hide"  align="center" label="二审修改版报告日期" :width="w.a13" prop="report_time2"></el-table-column> -->
      <el-table-column align="center" label="最终递交日期" :width="w.a14" prop="finish_time"></el-table-column>
      <el-table-column v-if="noprint" label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="detail(scope.$index+1, scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <v-pagination
      @page-change="pageChange"
      class="p"
      v-show="page"
      @page-size-change="pageSizeChange"
      :total="total"
      :page-size="pageSize"
      :layout="['total', 'prev', 'pager', 'next', 'sizer', 'jumper']"
    ></v-pagination>

    <el-dialog title="详情" :visible.sync="editDialogVisible" width="50%">
          <!-- <el-table
      ref="print"
      id="table"
      v-loading="loading"
      :data="dialog"
      align="center"
      border
      style="width: 100%"
    > 
      <el-table-column type="index" label="序号" align="center" width="180" prop="id"></el-table-column>
      <el-table-column align="center" label="合同编号" width="180" prop="con_number"></el-table-column>
      
    
    </el-table> -->
      
      
      <el-form :model="editForm" ref="editFormRef" label-width="115px" class="demo-ruleForm">
        <el-form-item v-for="(item, index) in row" :key="index" :label="item[0]" prop="id">
          <el-col :span="22">
            <el-input :value="item[1]" :readonly="true" />
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ok">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </span>

    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";
import { getToken, getid, getlevel } from "@/utils/auth";
import { ymd, ym } from "@/api/date";
export default {
  name: "accessAdmin",
  data() {
    return {
      level:getlevel(),
      selectComId:"",
      selectPersonId: "",
      coms:'',
      row: [],
      hide: false,
      editForm: {
        id: "1"
      },
      editDialogVisible: false,
      noprint: true,
      w: {
        a1: "",
        a2: "",
        a3: "",
        a4: "",
        a5: "",
        a6: "",
        a7: "",
        a8: "",
        a9: "",
        a10: "",
        a11: "",
        a12: "",
        a13: "",
        a14: ""
      },
      page: false,
      loading: false,
      pageIndex: 1,
      pageSize: 10,
      total: 1,
      tableData: [],
      ymd: ymd(),
      ym: ym()
    };
  },
  created() {
    this.init();
    this.findCom()
    this.personList();
    console.log(getToken());
  },
  methods: {
        changeCom(e) {
      console.log(e);
      this.findList(e, "c");
    },
    findCom() {
      var that = this;
      request(`branch/selectdown`, {
        method: "get",
        headers: { "Content-Type": "application/json" },
        params: ""
      })
        .then(function(response) {
          console.log(response);
          if (response.data.code == 1) {
            that.coms = response.data.object;
          } else {
            that.$message.error(response.data.message);
          }
        })
        .catch(error => {
          console.log(error); //异常
        });
    },
    changePerson(e) {
      console.log(e);
      this.findList(e,'p');
    },
    personList() {
      var that = this;
      request(`person/selectComboBox`, {
        method: "get",
        headers: {
          "Content-Type": "application/json",
          token: getToken(),
          type: 1
        },
        params: ""
      })
        .then(res => {
          that.loading = false;
          that.persons = res.data.object;
          console.log(res);
        })
        .catch(e => {
          that.loading = false;
          console.log(e);
        });
    },
    ok() {
      this.editDialogVisible = false;
    },
    print() {
      this.noprint = false;
      setTimeout(() => {
        this.$print(this.$refs.print);
      }, 500);
      setTimeout(() => {
        this.noprint = true;
      }, 1500);
    },
    detail(index, r) {
      console.log(index, r);
      this.editDialogVisible = true;
      var rowvalue = Object.values(r);
      console.log(rowvalue);
      var rowkey = [
        "序号",
        "合同编号",
        "客户名称",
        "项目名称",
        "项目负责人",
        "项目部门",
        "初稿递交日期",
        "一审人员",
        "一审修改意见日期详情",
        "一审修改版报告日期",
        "二审人员",
        "二审修改意见日期详情",
        "二审修改版报告日期",
        "最终递交日期"
      ];
      var row = [];
      for (let i = 0; i < 14; i++) {
        if (i == 0) {
          row.push([rowkey[i], index]);
        } else {
          row.push([rowkey[i], rowvalue[i]]);
        }
      }
      console.log(row);
      this.row = row;
    },
    init() {
      this.loading = true;
      var that = this;
      request(`/quality/selectevalist`, {
        method: "get",
        headers: {
          "Content-Type": "application/json",
          token: getToken(),
          type: 1
        },
        params: ""
      })
        .then(res => {
          console.log(res);
          that.tableData = res.data.object;
          that.loading = false;
        })
        .catch(e => {
          that.loading = false;
          console.log(e);
        });
    },
    findList(e,t) {
      this.loading = true;
      var that = this;
      if(t=='p'){
        var resdata = {
        staff: e
      };
      }
      else if(t=='c'){
        var resdata = {
        uid: e
      }
      }
      else if(t=='i'){
      var resdata = {
        itemType: e
      };
      }
      else{
        this.$message.error('网络错误！')
      }
      request(`/quality/selectevalist`, {
        method: "get",
        headers: {
          "Content-Type": "application/json",
          token: getToken(),
          type: 1
        },
        params: resdata
      })
        .then(res => {
          console.log(res);
          that.tableData = res.data.object;
          that.loading = false;
        })
        .catch(e => {
          that.loading = false;
          console.log(e);
        });
    },
    findPerson(e) {
      var that = this;
      this.loading = true;
      var resdata = {
        staff: e
      };
      request(`/quality/selectevalist`, {
        method: "get",
        headers: {
          "Content-Type": "application/json"
        },
        params: resdata
      })
        .then(res => {
          this.loading = false;
          that.tableData = res.data.object;
          console.log(that.tableData);
          console.log(res);
        })
        .catch(e => {
          this.loading = false;
          console.log(e);
        });
    },
    pageChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.findList();
      console.log(pageIndex);
    },
    pageSizeChange(pageSize) {
      this.pageIndex = 1;
      this.pageSize = pageSize;
      this.findList();
    }
  }
};
</script>

<style scoped>
.center.mt15 a {
  margin-left: 5px;
}
.center.mt15 a:hover {
  color: rgb(64, 158, 255);
}

.p {
  margin-top: 18px !important;
}
.container {
  padding: 15px;
  font-weight: 400;
  color: #606266;
}
header {
  font-size: 19px;
}
.flex {
  display: flex;
  justify-content: space-between;
}
.mt15 {
  margin-top: 15px;
}
.center {
  text-align: center;
}
</style>
